<template>
  <view class="category">
    <ugo-search></ugo-search>
    <view class="main">
      <view class="left">
        <!-- :class="['menu',current==index?'active':'']" -->
        <!-- <view :class="['menu',current==index?'active':'']" v-for="(item,index) in menus" :key="item" @click="handleItemSelect(index)"> -->
        <view class="menu" v-for="(item,index) in menus" :key="item" @click="handleItemSelect(index)">
          <view :class="{active:current===index}">{{ item }}</view>
          
          </view>
      </view>
      <view class="right">
        <view v-for="item1 in goods" :key="item1.cat_id">

          <view class="tetle">/ {{ item1.cat_name }} /</view>

          <view class="goods">
             <navigator
             :url="'/pages/goods_list/goods_list?id='+item2.cat_id"
            v-for="item2 in item1.children"
            :key="item2.cat_id"
          >
            <u-image
              width="120rpx"
              height="120rpx"
              :src="item2.cat_icon"
            ></u-image>
            <view class="goods_name">{{ item2.cat_name }}</view>
          </navigator>
          </view>
         
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [],
      current:0,
      menus:[],
      goods:[]
    };
  },
  onLoad() {
    // 数据优化 避免setData数据冗余 把不需显示在页面的数据定义在onLoad()钩子函数中(这是uni-app的写法,并非vue写法)
    this.categories=[]

    // this.getCategory();

    const storeCategories = uni.getStorageSync("categories");
    // console.log(storeCategories)

    if(storeCategories){
      console.log("有缓存")
      if(Date.now()-storeCategories.time>1000*60*5){
        console.log("超时")
        this.getCategory()
      }else{
        this.categories = storeCategories.data
        this.menus = this.categories.map((item) => item.cat_name)
      this.goods = this.categories[this.current].children
      }

    }else{
      console.log("没有缓存")
      this.getCategory();
    }
      
  },

  onShow(){
    // console.log("我被显示")
     const storeCategories = uni.getStorageSync("categories");
    if(Date.now()-storeCategories.time>1000*60*5){
        console.log("超时")
        this.getCategory()
      }else{
        this.categories = storeCategories.data
        this.menus = this.categories.map((item) => item.cat_name)
      this.goods = this.categories[this.current].children
      }
  },
  // computed: {
  //   // 菜单
  //   menus() {
  //     return this.categories.map((item) => item.cat_name);
  //   },
  //   // 商品
  //   goods() {
  //     if (!this.categories[this.current]) return [];
  //     return this.categories[this.current].children;
  //   },
  // },
  methods: {
    handleItemSelect(index){
      this.current = index
      this.menus = this.categories.map((item) => item.cat_name)
      this.goods = this.categories[this.current].children
    },
    async getCategory() {
      let res = await this.$u.get("/categories");
      // console.log(res)
      this.categories = res.message;

       // 保存到本地(缓存数据)
      uni.setStorageSync("categories", {
        data: this.categories,
        time: Date.now()
      });

      this.menus = this.categories.map((item) => item.cat_name)
      this.goods = this.categories[this.current].children
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .main {
    flex: 1;
    // background-color: blue;
    display: flex;
    overflow: hidden;
    .left {
      width: 182rpx;
      background-color: #f3f3f3;
      overflow: auto;
      color: #585858;
      // display: flex;
      // flex-direction: column;
      // align-content: center;
      text-align: center;
      .menu {
        height: 74rpx;
        // line-height: 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .right {
      flex: 1;
      // background-color: yellow;
      overflow: auto;
      // display: flex;
      .tetle {
        height: 74rpx;
        // line-height: 74rpx;
         display: flex;
          align-items: center;
          justify-content: center;
          color: #666;
      }
      .goods{
        display: flex;
        flex-wrap: wrap;
        navigator{
          width: 33.33%;
          display: flex;
            flex-direction: column;
            align-items: center;
            margin: 15rpx 0;
            .goods_name{
              margin-top: 10rpx;
            }
        }
      }
    }
  }
  // .active{
  //   background-color:$theme-color;
  //   color: #fff;
  // }
  .active{
    width: 100%;
    color: $theme-color;
    border-left: 2px solid $theme-color;
  }
}
</style>